

<!--<template>-->
<!--  <div style="padding: 10px">-->
<!--    &lt;!&ndash;功能区域&ndash;&gt;-->

<!--    &lt;!&ndash;搜索区域&ndash;&gt;-->

<!--    &lt;!&ndash;表格区域&ndash;&gt;-->
<!--    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">-->
<!--      <el-table-column type="selection" width="55"></el-table-column>-->
<!--      <el-table-column prop="id" label="ID"/>-->
<!--      <el-table-column prop="commentId" label="评论序号"/>-->
<!--      <el-table-column prop="remarks" label="评论内容"/>-->
<!--      <el-table-column prop="roomId" label="房间号"/>-->
<!--      <el-table-column prop="userId" label="用户"/>-->
<!--    </el-table>-->
<!--    &lt;!&ndash;底部分页&ndash;&gt;-->
<!--    <div style="margin: 10px 0">-->
<!--      <el-pagination-->
<!--          v-model:current-page="currentPage"-->
<!--          v-model:page-size="pageSize"-->
<!--          :page-sizes="[5, 10, 20]"-->
<!--          :small="small"-->
<!--          :disabled="disabled"-->
<!--          :background="background"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import request from "@/utils/request";-->

<!--export default {-->
<!--  name: "Comment",-->
<!--  props: {-->
<!--    roomId: {-->
<!--      type: Number,-->
<!--      required: true-->
<!--    }-->
<!--  },-->
<!--  components: {},-->
<!--  data() {-->
<!--    return {-->
<!--      /*前端中的一些变量*/-->
<!--      form: {},-->
<!--      search: '',-->
<!--      currentPage: 1,-->
<!--      total: 10,-->
<!--      pageSize: 10,-->
<!--      tableData: []-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    handleEdit(row) {-->
<!--      /**-->
<!--       * 进行深拷贝-->
<!--       * 将row对象的值深拷贝给form表单对象-->
<!--       * @type {any}-->
<!--       */-->
<!--      this.form = JSON.parse(JSON.stringify(row));-->
<!--      //弹出弹窗-->
<!--      this.dialogVisible = true;-->

<!--    },-->


<!--    /*-->
<!--    删除，根据id删除-->
<!--     */-->
<!--    handleDelete(id) {-->

<!--      request.delete("/hotelRoom/deleteHotelRoom/" + id).then(res => {-->
<!--        if (res.code === '0') {-->
<!--          this.$message({-->
<!--            type: "success",-->
<!--            message: '删除成功'-->
<!--          })-->
<!--        } else {-->
<!--          this.$message({-->
<!--            type: "error",-->
<!--            message: "删除失败"-->
<!--          })-->
<!--        }-->

<!--        this.load();//删除后需要重新加载表格-->
<!--      })-->

<!--    },-->
<!--    handleSizeChange() {-->
<!--      //改变当前个数触发-->
<!--      this.load();//重新刷新表格数据-->

<!--    },-->
<!--    handleCurrentChange() {-->
<!--      //改变当前页数触发-->
<!--      this.load();//重新刷新表格数据-->
<!--    },-->

<!--    /**-->
<!--     * 增加-->
<!--     */-->
<!--    add() {-->
<!--      //点击新增按钮，然后弹出弹框-->
<!--      this.dialogVisible = true;-->
<!--      //弹出弹窗则需要清空form中的数据，也就是将from中的表单的数据清空-->
<!--      this.form = {}//清空表单域 每次一打开这个表单则直接清空form中之前的数据-->
<!--    },-->

<!--    /*-->
<!--    新增接口-->
<!--    * */-->
<!--    save() {-->
<!--      if (this.form.id) {-->
<!--        //如果form对象中有id 则直接更新-->
<!--        request.put("/hotelRoom/updateHotelRoom", this.form).then(res => {-->
<!--          console.log(res);-->
<!--          //通过返回结果中的值先进行判断是否更新成功-->
<!--          //其中res的数据与后端对应-->
<!--          if (res.code === '0') {-->
<!--            this.$message({-->
<!--              type: "success",-->
<!--              message: "更新成功"-->
<!--            })-->
<!--          } else {-->
<!--            this.$message({-->
<!--              type: "error",-->
<!--              //res.msg是打印出成功或则失败的信息-->
<!--              message: res.msg-->
<!--            })-->
<!--          }-->
<!--          this.load();//刷新页面，重新加载查询-->
<!--          this.dialogVisible = false;//更新成功后关闭弹窗-->
<!--        })-->
<!--      } else {-->
<!--        //如果没有id则直接新增-->
<!--        request.post("/hotelRoom/hotelRoomAdd", this.form).then(res => {-->
<!--          console.log(res)-->
<!--          if (res.code === '0') {-->
<!--            //其中的￥。message是自带的提示，如果更新成功，则提示更新成功-->
<!--            this.$message({-->
<!--              type: "success",-->
<!--              message: "新增成功"-->
<!--            })-->
<!--          } else {-->
<!--            this.$message({-->
<!--              type: "error",-->
<!--              message: res.msg-->
<!--            })-->
<!--          }-->
<!--          this.load();//新增成功后直接刷新表格中的数据-->
<!--          this.dialogVisible = false;//然后关闭弹窗-->
<!--        })-->
<!--      }-->


<!--    },-->


<!--    searchByRoomName() {-->
<!--      request.get("/hotelRoom/getHotelRoomByName", {-->
<!--        params: {-->
<!--          roomName: this.roomNameQuery-->
<!--        }-->
<!--      }).then(res => {-->
<!--        this.tableData = res.data.list;-->
<!--        this.total = res.data.total;-->
<!--      });-->
<!--    },-->


<!--    /*-->
<!--    分页查询接口-->
<!--    * */-->
<!--    load() {-->
<!--      request.get("/user/getCommentPage", {-->
<!--        params: {-->
<!--          pageNumber: this.currentPage,-->
<!--          pageSize: this.pageSize,-->
<!--          search: this.search,-->
<!--          roomId: this.roomId // 查询某一房间的评论-->
<!--        }-->

<!--      }).then(res => {-->
<!--        console.log(res);-->
<!--        this.tableData = res.data.list;-->
<!--        this.total = res.data.total;-->
<!--      })-->
<!--    },-->
<!--    handleSelectionChange(selection) {-->
<!--      this.selectedIds = selection.map(item => item.id);-->
<!--    },-->

<!--  },-->

<!--  /*这个方法是页面以架子啊就执行其中的方法*/-->
<!--  created() {-->
<!--    this.load();-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.el-input__inner {-->
<!--  text-overflow: ellipsis;-->
<!--  overflow: hidden;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--</style>-->

<template>
  <div style="padding: 10px">
    <div class="comment-section" style="max-width: 650px;">
      <!-- 评论列表 -->
      <div class="comment-list">
        <div v-for="comment in tableData" :key="comment.id" class="comment-item">
          <p>{{ comment.remarks }}</p>
          <small>用户：{{ comment.userId }}</small>
        </div>
      </div>
      <!-- 底部分页 -->
      <div style="margin: 10px 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Comment",
  props: {
    roomId: {
      type: Number,
      required: true
    }
  },
  components: {},
  data() {
    return {
      /*前端中的一些变量*/
      form: {},
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: []
    }
  },
  methods: {
    handleEdit(row) {},
    handleDelete(id) {},
    handleSizeChange() {},
    handleCurrentChange() {},
    add() {},
    save() {},
    searchByRoomName() {},
    load() {
      request.get("/user/getCommentPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
          roomId: this.roomId // 查询某一房间的评论
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      })
    },
    handleSelectionChange(selection) {}
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
.comment-section {
  padding: 20px;
}
.comment-item {
  border: 1px solid #ddd;
  padding: 10px;
  margin-bottom: 10px;
}
small {
  color: #888;
}
</style>

